<template>
	<view style="box-sizing: border-box">
		<!-- #ifdef APP||H5  -->
		<!-- background: bg, -->
		<view :style="{ background: bgImage ? '' : bg, zIndex: zIndex }" :class="bgImage ? 'headers' : ''"
			class="my-head">
			<view class="head-left">
				<view v-if="showReturn">
					<u-icon v-show="showReturn" name="arrow-left" :color="color" @click="fnReturn"></u-icon>
				</view>
				<slot name="headLeft"></slot>
			</view>
			<view class="view-head" @click="handleClickHeadr">
				<view class="title" :style="[
            { 'font-weight': bold, fontSize: headerSize },
            { color: color },
          ]">{{ title }}
				</view>
				<view class="icon" v-if="showIcon">
					<u-icon name="arrow-down-fill"></u-icon>
				</view>
				<u-picker :show="showSheet" :columns="lists" keyName="label" @confirm="confirm" @cancel="handleClose">
				</u-picker>
			</view>
			<view class="head-right" v-if="!showRightIcon">
				<view class="text font-pf-b" v-if="right" @click="clickRight" :style="[
            { color: textrightcolor },
            { 'font-size': textrightfontSize },
          ]">{{ text_right }}</view>
				<slot name="headRight"></slot>
				<view class="iconCla" v-if="iconShow">
					<view class="righticon" @click="clickRightIcon">
						<!-- <u-icon :name="IconName" :color="textrightcolor" :size="RightIconSize"></u-icon> -->
						<image class="imageCla" src="@/static/static/images/fenxiangIcon.png"></image>
					</view>
					<slot name="headRightIcon"></slot>
				</view>
			</view>
			<view class="head-right" v-if="showRightIcon">
				<view class="righticon" @click="clickRightIcon">
					<!-- <u-icon :name="IconName" :color="textrightcolor" :size="RightIconSize"></u-icon> -->
					<image class="imageCla" src="@/static/static/images/fenxiangIcon.png"></image>
				</view>
				<slot name="headRightIcon"></slot>
			</view>

		</view>
		<view class="occupy"></view>

		<slot name="textnr"></slot>

		<!-- #endif -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showSheet: false,
			};
		},
		props: {
			bgImage: {
				type: Boolean,
				default: false,
			},
			headerSize: {
				type: String,
				dafault: "36rpx",
			},
			isClick: {
				type: Boolean,
				default: false,
			},
			showIcon: {
				type: Boolean,
				default: false,
			},
			bg: {
				//背景色
				type: String,
				default: "#ffffff",
			},
			title: {
				//标题
				type: String,
				default: "",
			},
			color: {
				//字体颜色
				type: String,
				default: "#000000",
			},
			bold: {
				//是否标题加粗
				type: String,
				default: "bold",
			},
			right: {
				//是否显示右边文字
				type: Boolean,
				default: false,
			}, //右边文字
			iconShow: {
				//是否显示文字旁的图标
				type: Boolean,
				default: false,
			},
			text_right: {
				type: String,
				default: "",
			},
			isReturn: {
				//点击返回按钮是否返回？  不返回就返回参数
				type: Boolean,
				default: true,
			},
			isReturnHome: {
				// 点击返回按钮 是否返回首页。
				type: Boolean,
				default: false,
			},
			showReturn: {
				//是否显示返回按钮
				type: Boolean,
				default: true,
			},
			zIndex: {
				//层级
				type: Number,
				default: 999,
			},
			lists: {
				type: Array,
				default: () => [],
			},
			textrightcolor: {
				type: String,
				default: "#000000",
			},
			textrightfontSize: {
				type: String,
				default: "14px",
			},
			showRightIcon: {
				type: Boolean,
				default: false
			},
			IconName: {
				type: String,
				default: 'share-square'
			},
			RightIconSize: {
				type: String,
				default: "20px"
			}
		},
		mounted() {
			this.getHeadData();
		},
		//子组件
		components: {},
		// 计算方法
		methods: {
			handleClose(val) {
				this.showSheet = false;
			},
			confirm(val) {
				this.$emit("handleConfirm", val.value[0]);
				this.showSheet = false;
			},
			handleClickHeadr() {
				if (this.isClick === false) {
					return;
				}
				this.showSheet = true;
			},
			getHeadData() {
				let that = this;
				uni.getSystemInfo({
					success: (e) => {
						let statusBar = 0; //状态栏高度
						let customBar = 0; // 状态栏高度 + 导航栏高度
						let navbar = 0; // 自定义标题与胶囊对齐高度

						let info = uni.createSelectorQuery().select(".my-head");
						info
							.boundingClientRect((data) => {
								// #ifdef MP
								statusBar = e.statusBarHeight;
								customBar = e.statusBarHeight + 45;
								if (e.platform === "android") {
									this.$store.commit("SET_SYSTEM_IOSANDROID", false);
									customBar = e.statusBarHeight + 50;
								}
								// #endif

								// #ifdef H5
								statusBar = 0;
								customBar = e.statusBarHeight - 5;
								// #endif

								// #ifdef APP-PLUS
								// console.log("app-plus", e);
								statusBar = e.statusBarHeight;
								customBar = e.statusBarHeight + 45;
								// #endif
								that.$emit("getHeadData", customBar);
							})
							.exec();
					},
				});
			},
			clickRight() {
				this.$emit("clickRight");
			},
			clickRightIcon() {
				this.$emit("clickRightIcon");
			},
			fnReturn() {
				if (this.isReturn && !this.isReturnHome) {
					uni.navigateBack();
				} else if (this.isReturn && this.isReturnHome) {
					uni.switchTab({
						url: "/pages/Home/index",
					});
				} else {
					this.$emit("clickReturn");
				}
			},
		},
	};
</script>

<style lang="scss" scoped>
	.headers {
		background-image: url("/static/image/payicon/back.png");
		background-size: 100%;
		background-repeat: no-repeat;
	}

	.my-head {
		position: fixed;
		top: 0;
		width: 100%;
		padding: var(--status-bar-height) 30rpx 0;
		height: calc(88rpx + var(--status-bar-height));
		display: flex;
		justify-content: space-between;
		align-items: center;
		box-sizing: border-box;

		.title {
			font-size: 32rpx;
			overflow: hidden;
			word-break: break-all;
			/* break-all(允许在单词内换行。) */
			text-overflow: ellipsis;
			/* 超出部分省略号 */
			display: -webkit-box;
			/** 对象作为伸缩盒子模型显示 **/
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 1;
		}

		.head-left,
		.head-right {
			min-width: 88rpx;
			display: flex;

			// align-items: center;
			.iconCla {
				// margin-left: 20rpx;
			}
		}

		.righticon {
			display: flex;
			justify-content: end;
			align-items: center;
			.imageCla{
				width: 40rpx;
				height: 40rpx;
				margin-left: 40rpx;
				// background-color: red;
			}
		}

		.text {
			font-size: 32rpx;
			text-align: right;
			font-weight: 600;
			color: #333333;
		}
	}

	.occupy {
		width: 100%;
		padding: 0 30rpx;
		height: calc(88rpx + var(--status-bar-height));
		box-sizing: border-box;
	}

	.view-head {
		display: flex;

		.icon {
			margin-left: 30rpx;
			display: flex;
		}
	}
</style>